<template>
  <!-- 顶部个人信息区域 -->
  <view class="container">
    <!-- 头部背景 -->
    <view class="header-bg"></view>
    
    <!-- 个人信息卡片 -->
    <view class="user-info-card">
      <view class="avatar-container">
        <image :src="userAvatar"  mode="aspectFill" class="avatar"></image>
      </view>
      <view class="user-info">
        <view class="user-name-container">
          <text class="user-name" >{{user.userName }}</text>
          <button class="settings-btn" @tap="goToOrder('setting')">
            <image src="/static/myself/设置.png" mode="aspectFit" class="settings-icon"></image>
          </button>
        </view>
        <text class="vip-tag">{{user.role}}</text>
      </view>
    </view>
    
    <!-- 数据统计区域 -->
    <view class="data-stats">
      <view class="stat-item">
        <text class="stat-label">我的积分</text>
        <text class="stat-value">{{user.point}}</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-label">账户余额</text>
        <text class="stat-value">¥{{user.money}}</text>
      </view>
    </view>
    
    <!-- 订单区域 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <button class="all-orders-btn" @tap="goToOrder('all_order')">全部订单 ></button>
      </view>
      
      <view class="order-status">
        <view class="status-item" @tap="goToOrder('pending_payment')">
          <image src="http://172.172.9.57:9999/myself/待付款.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">待付款</text>
        </view>
       <!-- <view class="status-item" @tap="goToOrder('pending_shipment')">
          <image src="http://172.172.9.57:9999/myself/代发货.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">待发货</text>
        </view>
        <view class="status-item" @tap="goToOrder('pending_receipt')">
          <image src="http://172.172.9.57:9999/myself/待收货.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">待收货</text>
        </view> -->
        <view class="status-item" @tap="goToOrder('completed')">
          <image src="http://172.172.9.57:9999/myself/已完成.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">已完成</text>
        </view>
      <!--  <view class="status-item" @tap="goToOrder('after_sale')">
          <image src="http://172.172.9.57:9999/myself/售后.png" mode="aspectFit" class="status-icon"></image>
          <text class="status-text">退款/售后</text>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { ref, computed } from 'vue';
import { useUserStore  } from'@/stores/api.js'

const userStore = useUserStore ();
// 页面加载完成后执行
onMounted(() => {
  console.log('个人中心页面已加载');
});

let user= reactive({
	userName: userStore.getUserName || "请先登录", //用户名
	imgPath:userStore.getImgPath , //用户头像
	role: userStore.getRole  ,//用户权限信息
	point: userStore.getPoints || "--", //用户积分
	money: userStore.getMoney || "--",
}) 
// 计算属性处理图片路径
const userAvatar = computed(() => {
  // 如果有用户自定义图片路径，使用它；否则使用默认图片
  return user.imgPath || 'http://172.172.9.57:9999/myself/x_头像.png';
});
// 跳转到订单详情
const goToOrder = (status: string) => {
  console.log(`跳转到${status}订单页面`);
  
  uni.navigateTo({
    url: `/pages/${status}/${status}`
  });
};


</script>

<style>
/* 基础颜色定义 - 薄荷绿主题 */
:root {
  --primary-color: #98D7C2; /* 主色调 - 浅薄荷绿 */
  --primary-dark: #6AA78F; /* 主色深色 */
  --secondary-color: #E8F5F0; /* 次要色 - 薄荷绿背景 */
  --text-color: #333333; /* 文本主色 */
  --text-light: #666666; /* 文本次色 */
  --border-color: #E0E0E0; /* 边框色 */
  --bg-white: #FFFFFF; /* 白色背景 */
}

/* 容器样式 */
.container {
  background-color: var(--secondary-color);
  min-height: 100vh;
  padding-bottom: 20rpx;
}

/* 头部背景 */
.header-bg {
  height: 300rpx;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  position: relative;
  z-index: 1;
}

/* 个人信息卡片 */
.user-info-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: var(--bg-white);
  border-radius: 20rpx;
  margin: -100rpx 30rpx 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid var(--primary-color);
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-info {
  margin-left: 20rpx;
}

/* 新增：用户名容器样式 */
.user-name-container {
  display: flex;
  align-items: center;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-color);
  display: block;
  margin-bottom: 10rpx;
}

/* 新增：设置按钮样式 */
.settings-btn {
  padding: 0;
  margin: 0 0 10rpx 10rpx;
  border: none;
  background-color: transparent;
}

.settings-icon {
  width: 30rpx;
  height: 30rpx;
  opacity: 0.7;
}

.settings-btn:hover .settings-icon {
  opacity: 1;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.vip-tag {
  font-size: 24rpx;
  color: #FF9800;
  background-color: #FFF3E0;
  padding: 4rpx 16rpx;
  border-radius: 30rpx;
}

/* 数据统计区域 */
.data-stats {
  display: flex;
  background-color: var(--bg-white);
  border-radius: 20rpx;
  margin: 20rpx 30rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 20rpx;
}

.stat-label {
  font-size: 24rpx;
  color: var(--text-light);
  display: block;
  margin-bottom: 10rpx;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--primary-dark);
}

.stat-divider {
  width: 2rpx;
  background-color: var(--border-color);
  margin: 0 10rpx;
}

/* 订单区域 */
.order-section {
  background-color: var(--bg-white);
  border-radius: 20rpx;
  margin: 0 30rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid var(--border-color);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-color);
}

.all-orders-btn {
  font-size: 24rpx;
  color: var(--primary-dark);
  padding: 0;
  margin: 0;
  line-height: 1;
  background-color: transparent;
  border: none;
}

.order-status {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  padding: 20rpx 0;
}

.status-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.status-text {
  font-size: 24rpx;
  color: var(--text-color);
}

.settings-btn{
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	overflow: hidden;
}
.settings-icon{
	width: 100%;
	height: 100%;
	mode:cover
}
</style>
